import { useState } from 'react';
import { Divider } from 'antd';
import Pagination from '../../components/Pagination';

const Test = () => {
    const [current, setCurrent] = useState(3);
    const onChange = (page) => {
        console.log(page);
        setCurrent(page.current);
    };

    const showTotal = total => `总共 ${total} 条`;
    return (
        <div className="p-20">
            <h3 className="m-b-20">分页</h3>
            <Divider orientation="left">基础用法</Divider>
            <Pagination defaultCurrent={3} total={150}/>
            <Divider orientation="left">受控</Divider>
            <Pagination current={current} onChange={onChange} total={150}/>
            <Divider orientation="left">显示总条数</Divider>
            <Pagination showSizeChanger showTotal={showTotal} total={70}/>
            <div className="m-t-20">
                <Pagination showSizeChanger showTotal={showTotal} total={72}/>
            </div>
            <div className="m-t-20">
                <Pagination showSizeChanger showTotal={showTotal} total={50}/>
            </div>
            <Divider orientation="left">完整功能</Divider>
            <Pagination
                showQuickJumper
                showSizeChanger
                showTotal={showTotal}
                total={150}
            />
        </div>
    );
};

export default Test;
